<template>
  <div class="control_right">
    <!-- <el-tabs stretch v-model="activeName" style="height: 100%;">
      <el-tab-pane label="聊天" name="first"> </el-tab-pane>
      <el-tab-pane label="小编专用" name="second">小编专用</el-tab-pane>
    </el-tabs> -->
    <div class="control_box_toptitle">
      直播间标题：{{info.title}}
    </div>
    <div class="control_chat_box">
      <div class="control_chat_box_left">
        <div class="control_chat_box_left_top" ref="control_chat_box_left_top">
          <div v-for="(item, index) in messageList" :key="index" v-show="item.to == roomim">
            <div class="control_chat_box_left_top_msg" v-if="item.type === TIM.TYPES.MSG_TEXT">
              <p>
                {{ item.nick || item.from || "" }}：
                {{ item.time | getTimeFormat }}
              </p>
              <p>{{ item.payload.text }}</p>
            </div>

            <div class="control_chat_box_left_top_msg" v-else-if="
                item.type == 'TIMCustomElem' &&
                  item.payload &&
                  item.payload.data == 'joinTip'
              ">
              <p>
                系统通知：
                {{ item.time | getTimeFormat }}
              </p>
              <p>{{ item.nick || item.from }} {{ item.payload.description }}</p>
            </div>

            <div class="control_chat_box_left_top_msg" v-else-if="
                item.type == 'TIMCustomElem' &&
                  item.payload &&
                  item.payload.data == 'present'
              ">
              <p>
                礼物通知：
                {{ item.time | getTimeFormat }}
              </p>
              <p>
                {{ item.nick || item.from }} 送出
                <img :src="
                    $fnc.getImgUrl(JSON.parse(item.payload.extension).piclink)
                  " alt="" style="width:30px" />
                x{{ JSON.parse(item.payload.extension).number }}
              </p>
            </div>

            <div class="control_chat_box_left_top_msg" style="background-color: #eaeaea;" v-else-if="
                item.type == 'TIMCustomElem' &&
                  item.payload &&
                  item.payload.data == 'waistcoatTip'
              ">
              <p>
                {{ JSON.parse(item.payload.extension).name }}：
                {{ item.time | getTimeFormat }}
              </p>
              <p>
                {{ JSON.parse(item.payload.extension).msg }}
              </p>
            </div>
          </div>
        </div>
        <div class="control_chat_box_left_top_input">
          <div class="control_chat_box_left_top_input_top">
            <p></p>
            <p>
              当前小编：<span>{{ nowsel.name }}</span>
            </p>
          </div>
          <div class="control_chat_box_left_top_input_msg">
            <el-input type="textarea" :rows="5" placeholder="我也来参与一下互动" resize="none" v-model="inputtext" @keyup.enter.native="sendmsg">
            </el-input>
            <div class="control_chat_box_left_top_input_msg_btn">
              <p @click="sendmsg()">发送</p>
            </div>
          </div>
        </div>
      </div>
      <div class="control_chat_box_right">
        <div style="height: 100%;">
          <div class="control_chat_box_right_all">
            <div>马甲列表</div>
            <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
            <p @click="form={name:'',piclink:''};dialogFormVisible = true">新增</p>
          </div>
          <div class="control_chat_box_right_choose_item" style="height: 95%">
            <div class="control_chat_box_right_item_box" v-for="(item, index) in waist_list" :key="index">
              <div>
                <img :src="$fnc.getImgUrl(item.piclink)" alt="" style="border-radius:50%" />
                <p>{{ item.name }}</p>
              </div>
              <el-button class="control_chat_box_right_item" type="primary" @click="
                    nowsel = item;
                    $message({
                      message: '切换马甲成功',
                      type: 'success'
                    });
                  ">切换</el-button>
              <el-button class="control_chat_box_right_item" size="mini" type="danger" @click="del_waist(item)">删除</el-button>
            </div>

            <!-- <el-empty :image-size="150" v-if="waist_list && waist_list.length == 0"></el-empty> -->
          </div>
        </div>

      </div>
    </div>
    <el-dialog title="输入聊天昵称" :visible.sync="dialogFormVisible" class="control_right_add">
      <el-form>
        <el-form-item>
          <p class="dialog_tag">设置简单易记的名称有助于让大家认识你哦</p>
          <el-input autocomplete="off" placeholder="请输入聊天昵称" v-model="form.name"></el-input>

        </el-form-item>
        <el-form-item>
          <p class="dialog_tag">请选择头像</p>
          <el-input autocomplete="off" placeholder="请填入图片地址" v-model="form.piclink">
          </el-input>
          <uploadpic :piclink="form.piclink" ref="uploadpic" :width="150" :height="150" :is_more="false" @send_pic="onSuccess">
          </uploadpic>

        </el-form-item>
      </el-form>
      <div class="dialog_btn">
        <p @click="submit_waist">确定</p>
        <p @click="form = {name:'',piclink:''};dialogFormVisible=false">取消</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  name: "control_right",
  data () {
    return {
      form: {
        piclink: ""
      },
      activeName: "first",
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      waist_list: [],
      inputtext: "",
      nowsel: {},
      msg: [],
      dialogFormVisible: false
    };
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState({
      messageList: state => state.live.msglist,
      Prelist: state => state.live.Prelist,
      nowroom: state => state.live.nowroom
    }),
    roomim () {
      return decodeURIComponent(this.$route.query.im) || "";
    }
  },
  created () {
    this.get_waist();
  },
  components: {
    uploadpic
  },
  watch: {
    messageList (old, after) {
      this.$nextTick(() => {
        this.$refs.control_chat_box_left_top.scrollTop = this.$refs.control_chat_box_left_top.scrollHeight;
      });
    }
  },
  methods: {
    del_waist (item) {
      this.$confirm('此操作将永久删除该马甲, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.getPage.del_waterman({ id: item.id }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.get_waist();
          } else {
            this.$message({
              message: res.data.result,
              type: "error"
            });
          }
        })

      }).catch(() => {

      });
    },
    submit_waist () {
      var params = {
        lid: this.$route.query.mid,
        name: this.form.name,
        piclink: this.form.piclink,
      };
      this.$api.getPage.add_waterman(params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.dialogFormVisible = false;
          this.get_waist();
        } else {
          this.$message({
            message: res.data.result,
            type: "error"
          });
        }
      })
    },
    get_waist () {
      this.$api.getPage.get_waterman({ lid: this.$route.query.mid }).then(res => {
        if (res.data.code == 200) {
          this.waist_list = res.data.result
        }
      })
    },
    sel_pic () {
      this.$refs.uploadpic.is_show = true;
    },
    onSuccess (pic, item, index) {
      this.form.piclink = pic;
    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.names : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.names.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.names.length;
    },
    sendmsg () {
      if (!this.nowsel.name) {
        this.$message({
          message: "警告哦，请先选择右侧的马甲后再进行发言",
          type: "error"
        });
        return;
      }
      if (!this.inputtext) {
        this.$message({
          message: "警告哦，不允许发送空消息",
          type: "warning"
        });
        return;
      }
      var params = {
        avatar: this.nowsel.avatar || "",
        name: this.nowsel.name || "",
        msg: this.inputtext
      };

      var option = {
        to: this.roomim,
        conversationType: this.TIM.TYPES.CONV_GROUP,
        payload: {
          data: "waistcoatTip",
          extension: JSON.stringify(params)
        }
      };

      var msg = this.tim.createCustomMessage(option);
      this.tim
        .sendMessage(msg)
        .then(imResponse => {
          // 发送成功
          var obj = imResponse.data.message;
          obj.from = this.nowsel.name || "";
          this.$store.commit("addLiveMsg", [obj]);
          this.inputtext = "";
          this.$message({
            message: "恭喜你，发送成功",
            type: "success"
          });
        })
        .catch(imError => {
          this.$message({
            message: "发送失败",
            type: "error"
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.control_right {
  background-color: #fff;
  border: 8px solid rgb(214, 218, 225);
  height: 100%;
  display: flex;
  flex-flow: column;
  /deep/.el-tabs__nav-wrap::after {
    background-color: transparent;
  }

  /deep/.el-tabs__content {
    height: 94%;
  }
  /deep/.el-tab-pane {
    height: 100%;
  }
  .control_box_toptitle {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 0;
  }
  .control_right_add {
    /deep/.el-dialog__header {
      text-align: left;
    }
    /deep/.el-form-item {
      margin-bottom: 0px;
    }
    .dialog_tag {
      text-align: left;
      font-size: 13px;
      color: rgb(106, 129, 139);
    }
    .dialog_btn {
      display: flex;
      border: 1px solid rgb(33, 150, 243);
      width: 100px;
      border-radius: 4px;
      margin-top: 15px;
      p {
        cursor: pointer;
        &:nth-child(1) {
          padding: 5px;
          flex: 1;
          background-color: rgb(33, 150, 243);
          color: #fff;
        }
        &:nth-child(2) {
          padding: 5px;
          flex: 1;
          color: rgb(33, 150, 243);
        }
      }
    }
  }
  .control_chat_box {
    display: flex;
    justify-content: space-between;
    flex: 1;
    overflow: auto;
    border-top: 1px solid #d6dae1;
    .control_chat_box_left {
      flex: 6;
      border-right: 1px solid #d6dae1;
      .control_chat_box_left_top {
        padding: 0 10px;
        height: 77%;
        overflow: auto;
        .control_chat_box_left_top_msg {
          text-align: left;
          &:last-child {
            border-bottom: 0;
          }
          border-bottom: 1px solid rgb(214, 218, 225);
          p {
            padding: 5px;
            &:nth-child(1) {
              color: rgb(72, 125, 242);
            }
            &:nth-child(2) {
              width: 300px;
              word-wrap: break-word;
              padding-bottom: 10px;
            }
          }
        }
      }
      .control_chat_box_left_top_input {
        padding: 10px;
        border-top: 1px solid rgb(214, 218, 225);
        .control_chat_box_left_top_input_top {
          display: flex;
          justify-content: space-between;
          font-size: 13px;
          .fa {
            font-size: 20px;
          }
          p {
            &:nth-child(2) {
              span {
                color: red;
              }
            }
          }
        }
        .control_chat_box_left_top_input_msg {
          /deep/.el-textarea__inner {
            border: 0;
            padding: 5px 0;
          }
          .control_chat_box_left_top_input_msg_btn {
            display: flex;
            justify-content: flex-end;
            p {
              cursor: pointer;
              font-size: 13px;
              background-color: rgb(33, 150, 243);
              padding: 4px 10px;
              margin-left: 12px;
              border-radius: 4px;
              color: #fff;
            }
          }
        }
      }
    }
    .control_chat_box_right {
      flex: 4;
      /deep/.el-dialog__header {
        text-align: left;
      }
      /deep/.el-form-item {
        margin-bottom: 0px;
      }
      .dialog_tag {
        text-align: left;
        font-size: 13px;
        color: rgb(106, 129, 139);
      }
      .dialog_btn {
        display: flex;
        border: 1px solid rgb(33, 150, 243);
        width: 100px;
        border-radius: 4px;
        p {
          cursor: pointer;
          &:nth-child(1) {
            padding: 5px;
            flex: 1;
            background-color: rgb(33, 150, 243);
            color: #fff;
          }
          &:nth-child(2) {
            padding: 5px;
            flex: 1;
            color: rgb(33, 150, 243);
          }
        }
      }
      .control_chat_box_right_all {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        p {
          cursor: pointer;
        }
      }
      .control_chat_box_right_choose_item {
        overflow: auto;
        div {
          display: flex;
          align-items: center;
          margin-right: 0;
          flex: 1;
          img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }
        }
        /deep/.el-checkbox__label {
          font-size: 13px;
        }
      }
    }
  }
  .control_chat_box_right_item {
    padding: 5px 10px;
    font-size: 10px;
  }
  .control_chat_box_right_item_box {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    border-bottom: 1px solid rgb(214, 218, 225);
    &:last-child {
      // border-bottom: 0;
    }
    /deep/.el-checkbox {
    }
    div {
      display: flex;
      align-items: center;
    }
  }
}
</style>
